<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8"/>
    <title>cart</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/proList.css"/>
</head>
<body>
<div class="head ding">
    <div  th:replace="common :: head" ></div>

</div>
<div class="cart mt"><!-----------------logo------------------->
    <!--<div class="logo"><h1 class="wrapper clearfix"><a href="index.html"><img class="fl" src="img/temp/logo.png"></a><img class="top" src="img/temp/cartTop01.png"></h1></div>-->
    <!-----------------site------------------->
    <div class="site"><p class=" wrapper clearfix"><span class="fl">购物车</span><img class="top"
                                                                                   src="img/temp/cartTop01.png"><a
            href="/" class="fr">继续购物&gt;</a></p></div><!-----------------table------------------->
    <center><div th:if="${#lists.isEmpty(carts)}" style="margin-top: 130px;margin-bottom: 130px">空空如也~<a href="/" style="color: red">去逛逛</a></div></center>

    <div class="table wrapper" th:if="${not #lists.isEmpty(carts)}">
        <div class="tr">
            <div>商品</div>
            <div>单价</div>
            <div>数量</div>
            <div>小计</div>
            <div>操作</div>
        </div>
        <div class="th" th:each="cart:${carts}" th:if="${cart.isPayment==false}">
            <div class="pro clearfix"><label class="fl"><input type="checkbox" name="test" th:value="${cart.id}"/><span></span></label><a class="fl"
                                                                                                        th:href="@{'/prodetail?id='+${cart.goods.id}}">
                <dl class="clearfix">
                    <dt class="fl"><img width="100" height="100" th:src="${cart.goods.image}"></dt>
                    <dd class="fl"><p th:text="${cart.goods.title.substring(0,20)}"></p>
                        <p>颜色分类:</p>
                        <p th:text="${cart.goods.goodsBoOne.type}"></p></dd>
                </dl>
            </a></div>
            <div class="price" th:text="${'￥'+cart.goods.price}"></div>
            <div class="number"><p class="num clearfix"><span
                    class="fl" th:text="${cart.orderNumber}">1</span></p></div>
            <div class="price sAll" th:text="${'￥'+(cart.orderNumber*cart.goods.price)}"></div>
            <div class="price"><a class="del" href="javascript:void(0)" onclick="a(this.id)" th:id="${cart.id}">删除</a></div>

        </div>
        <div class="goOn">空空如也~<a href="/">去逛逛</a></div>
        <div class="tr clearfix"><label class="fl"><input class="checkAll" type="checkbox"/><span></span></label>
            <p class="fl"><a href="#">全选</a><a href="javascript:void(0)" class="del">删除</a></p>
            <p class="fr"><span>共<small id="sl">0</small>件商品</span><span>合计:&nbsp;<small id="all">￥0.00</small></span><a
                    href="javascript:void(0)" class="count" onclick="accounts()">结算</a></p></div>
    </div>
</div>
<div class="mask"></div>
<div class="tipDel"><p>确定要删除该商品吗？</p>
    <p class="clearfix"><a class="fl cer" href="javascript:void(0)" onclick="del()">确定</a><a class="fr cancel" href="javascript:void(0)">取消</a></p></div><!--返回顶部-->
<div th:replace="common :: gotop"></div>

<div  th:replace="common :: footer"></div>
<div class="mask"></div><!-------------------mask内容------------------->
<div class="proDets"><img class="off" src="img/temp/off.jpg"/>
    <div class="proCon clearfix">
        <div class="proImg fr"><img class="list" src="img/temp/proDet.jpg"/>
            <div class="smallImg clearfix"><img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg"><img
                    src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg"><img src="img/temp/proDet03.jpg"
                                                                                          data-src="img/temp/proDet03_big.jpg"><img
                    src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg"></div>
        </div>
        <div class="fl">
            <div class="proIntro change"><p>颜色分类</p>
                <div class="smallImg clearfix"><p class="fl on"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花"
                                                                     data-src="img/temp/proBig01.jpg"></p>
                    <p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草"
                                       data-src="img/temp/proBig02.jpg"></p>
                    <p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg"></p>
                    <p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg"></p>
                </div>
            </div>
            <div class="changeBtn clearfix"><a href="javascript:void(0)" class="fl"><p class="buy" >确认</p></a><a href="javascript:void(0)" class="fr"><p
                    class="cart">取消</p></a></div>
        </div>
    </div>
</div>
<div class="pleaseC"><p>请选择宝贝</p><img class="off" src="img/temp/off.jpg"/></div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
<script>
    var id = 0;
    function a(text) {
        id = text
    }

    function del() {
        var flag = $("input[type='checkbox']").is(':checked')
        if (flag){
            id = '';
            var name = document.getElementsByName("test");
            for (s in name){
                if (name[s].checked){
                    id +=name[s].value+','
                }
            }
            id = id.substring(0,id.length-1)
        }
        $.get("cart/delete?id="+id,function (result) {})
    }

    function accounts() {
        var flag = $("input[type='checkbox']").is(':checked')
        if (flag){
            var id = ''
            var name = document.getElementsByName("test");
            for (s in name){
                if (name[s].checked){
                    id +=name[s].value+','
                }
            }
            id = id.substring(0,id.length-1)
            window.location.replace("/order?id="+id)
        }else{
            alert("请选择要结算的商品")
        }
    }
</script>
</body>
</html>